<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>写博客</title>
        <link rel="stylesheet" type="text/css" href="../source/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../source/easyui/themes/icon.css">
        <script type="text/javascript" src="../source/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="../source/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../source/easyui/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
        <script type="text/javascript" src="../../js/axios.min.js"></script>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <script type="text/javascript" src="../source/js/cookie.js"></script>
        <style>
            #select{
                margin: 0px 26px 0px 0px;
                padding-top: 0px;
                padding-bottom: 0px;
                height: 28px;
                line-height: 28px;
                width: 137px;
                border-radius: 5px 5px 5px 5px;
                border-color: #95B8E7;
            }
        </style>
    </head>
    <body style="margin: 10px;z-index: 20">
        <div id="p" class="easyui-panel" title="编写博客" style="padding: 10px;width: 99%">
            <table cellspacing="20px">
                <tr>
                    <td width="80px">博客标题：</td>
                    <td>
                        <input
                                class="easyui-textbox"
                                type="text"
                                id="title"
                                style="width: 400px"
                                v-model="blog.title"
                                required
                        />
                    </td>
                </tr>
                <tr>
                    <td>所属类别：</td>
                    <td>
                        <select id="select">
                            <option selected>请选择博客类别</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td valign="top">博客内容：</td>
                    <td>
                        <div id="editor">

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>关键字：</td>
                    <td>
                        <input class="easyui-textbox" type="text" id="keyWord" name="keyWord" />&nbsp;(多个关键字中间用空格隔开)
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <a href="javascript:submitData()" class="easyui-linkbutton" id="btn"
                           data-options="iconCls:'icon-submit'">发布博客</a>
                    </td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
            //富文本编辑器
            const E = window.wangEditor;
            const editor = new E('#editor');
            // 配置 富文本编辑器 上传图片的接口
            editor.config.uploadImgServer = 'http://localhost:8081/kun/admin/editor/wangUpload';
            //设置上传图片http请求参数名，
            editor.config.uploadFileName = 'file';
            // 一次最多上传图片的数量
            editor.config.uploadImgMaxLength = 1;
            //富文本编辑器提示信息
            editor.config.placeholder = '亲, 请记得编辑你的内容哦';
            editor.config.zIndex = 10;
            var typeId = null;//博客类型的ID
            var blogId = null;//博客ID

            window.onload = function(){ //页面加载完后在加载
                editor.create();//富文本编辑器结束
            }
            //提交数据
            function submitData() {
                //获取标题
                var title = $("#title").textbox("getValue");
                //获取内容
                var contentNoTag = editor.txt.html();
                var summary = editor.txt.text().substr(0,155);//截取0~155 为摘要部分
                console.log(summary);
                //获取关键字
                var keyword = $("#keyWord").textbox("getValue");
                //非空验证
                if (title.length == 0) {
                    $.messager.alert("系统提示", "博客标题不能为空！", "info");
                } else if (typeId == 0) {
                    $.messager.alert("系统提示", "请选择博客类别！", "info");
                } else if (summary.length == 0) {
                    $.messager.alert("系统提示", "博客内容不能为空！", "info");
                } else {
                    var content = editor.txt.html();//获取html
                    //提交到服务器的参数列表
                    var blog = {
                        "title": title,
                        "summary":summary,
                        "content":content,
                        "typeId":typeId,
                        "keyword":keyword,
                        "contentNoTag":contentNoTag
                    };
                    //发送提交请求
                    if(blogId != 0){ //更改博客
                        blog.id = blogId;
                        // axios.post("http://localhost:8081/kun/admin/blog/updateBlogById",blog).then(res=>{
                        //     if (res.data.success) {
                        //         showMsg('博客更改成功');
                        //         //将内容清空
                        //         clearTable();
                        //     }else {
                        //         showMsg('博客更改失败');
                        //     }
                        // });
                    }else { //发布博客
                        axios.post("http://localhost:8081/kun/admin/blog/insertBlog",blog).then(res=>{
                            if (res.data.success) {
                                showMsg('博客发布成功');
                                //将内容清空
                                clearTable();
                            }else{
                                showMsg('博客发布失败');
                            }
                        });
                    }
                }
            }

            function showMsg(msg) {
                $.messager.show({
                    title: '系统提示',
                    msg: msg,
                    timeout: 3000,
                    showType: 'slide'
                });
            }

            //清除表单
            function clearTable() {
                editor.txt.clear();//将文本编辑器内容清空
                $("#select").val("请选择博客类别");//清空下拉框的值
                $("#title").textbox("setValue","");//清空文本内容
                $("#keyWord").textbox("setValue","");//清空文本内容
            }

            var vm = new Vue({
                el:"#p",
                data:{
                    blog:{},//博客
                    blogTypes:{}//博客类型
                },
                methods:{
                    //获取跳转路径后面的参数
                    getQueryString(name) {
                        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                        var r = window.location.search.substr(1).match(reg);
                        if (r != null) return unescape(r[2]);
                        return null;
                    },
                },
                created(){
                    //查询博客类型的id
                    axios.get("http://localhost:8081/kun/admin/blogType/queryBlogType").then(res=>{
                        var blogTypes = res.data.data.blogTypes;
                        this.blogTypes = blogTypes;
                        var select = $("#select");
                        $(blogTypes).each(function (index) {
                            select.append("<option value='"+blogTypes[index].id+"'>"+blogTypes[index].typeName+"</option>");
                        });
                        //option标签内容改变时
                        select.change(function () {
                            typeId =  $("#select option:selected").val();
                        })
                    });

                    //更改博客
                    blogId = Number(this.getQueryString("id"));
                    if(blogId != 0){
                        axios.post("http://localhost:8081/kun/admin/blog/selectBlogById",{blogId}).then(res=>{
                            var blog = res.data.data.blog;
                            editor.txt.html(blog.content);
                            $("#select option:selected").text(blog.blogtype.typeName).val(blog.blogtype.id);
                            $("#title").textbox("setValue",blog.title);
                            $("#keyWord").textbox("setValue",blog.keyword);
                            $("#btn .l-btn-text").text("更改博客");
                        });
                    }
                }
            });
        </script>
    </body>
</html>